<template>
    <div class="regcont">
    <el-row class="helptitle">用户注册</el-row>

    <div class="helpmain">
      <div class="r_main" v-if="showhid==false">
         <el-form ref="regform" :model="regform" label-width="100px">
            <el-form-item label="手机号：">
                <el-input v-model="regform.phone" maxlength="11" placeholder="请输入手机号(该号码为登录账号)！" ></el-input>
            </el-form-item>
             <!-- <el-form-item label="验证码：">
                <el-input v-model="regform.checkma" style="width:84%" placeholder="请获取验证码！"></el-input>
                <el-button class="send" @click="checksend">发　送</el-button>
            </el-form-item> -->
             <el-form-item label="密　码：">
                <el-input v-model="regform.password" maxlength="32" minlength="8" placeholder="请设置密码！"></el-input>
            </el-form-item>
             <el-form-item style="border:1px solid #EEE;width:84%"></el-form-item>
             <el-form-item label="姓　名：">
                <el-input v-model="regform.name" minlength="2" placeholder="请输入您的姓名以便我们为您提供更好服务！！"></el-input>
            </el-form-item>
             <el-form-item>
                <el-radio v-model="regform.radio" label="0">先生</el-radio>
                <el-radio v-model="regform.radio" label="1">女士</el-radio>
            </el-form-item>
             <el-form-item label="公司名称：">
                <el-input v-model="regform.company" minlength="2" placeholder="请输入您所在公司！"></el-input>
            </el-form-item>
             <el-form-item label="公司标志：">
               <el-upload
                    class="avatar-uploader"
                    :action="UploadUrl+'/user/uploadPic'"
                    :data="token"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                     <span style="color:#606266"> (只支持JPG、PNG格式，大小不超过500kb！)</span>
            </el-form-item>
             <el-form-item style="border:1px solid #EEE;width:84%"></el-form-item>
             <el-button class="submitlist" @click="handsubmit">提交</el-button>
         </el-form>
      </div>
        <div class="r_main" v-if="showhid==true">
            <div class="succss">
            <img src="../../assets/uimg/register_complete.png"/>
            <p class="succfin">注册完成！</p>
            <div class="greyline"></div>
            <router-link to="/login" class="backlo"><i class="el-icon-back"></i>返回首页登录</router-link>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import request2 from "../../utils/request-new";
export default {
  name:'Reg',
  data(){
    return{
      UploadUrl:'',
      regform:{
          name:'',   //姓名
          company:'', //公司名称
          password:'',//密码
          phone:'',  //手机号
          radio: '0',
          imgurl:'',  //图片
      }, 
      imageUrl: '',    //  
      showhid:false,  //注册成功之后显示
      token:{
      token:'939f61302be202a8375f31e6b5da6b1d',
      },
    }
  },
  mounted(){
    this.UploadUrl=process.env.VUE_APP_UAVAPI_BASE
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data
      // console.log(res,"11111")
      this.regform.imgurl=res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' ||file.type === 'image/png';
      const isLt2M = file.size /1024 < 500;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!');
      }
      return isJPG && isLt2M;
    },
    handsubmit(){
        this.checkphone(this.regform.phone);
        if(this.regform.password==''){
        this.$message({
              type: 'warning',
              message: '密码不能为空！'
        }); 
        return;
      }
      if(this.regform.name==''){
        this.$message({
              type: 'warning',
              message: '姓名不能为空！'
        }); 
        return;
      }
      if(this.regform.radio==''){
        this.$message({
              type: 'warning',
              message: '请选择性别！'
        }); 
        return;
      }
      if(this.regform.company==''){
        this.$message({
              type: 'warning',
              message: '请输入公司名称！'
        }); 
        return;
      }
      if(this.regform.imgurl==''){
        this.$message({
              type: 'warning',
              message: '请请上传公司logo！'
        }); 
        return;
      }
      //注册接口

      // console.log(this.imageUrl,"图片")
          request2({
                    url: "/user/register",
                    method: "post",
                    data: {
                        phone:this.regform.phone,
                        password:this.regform.password,
                        username:this.regform.name,
                        sex:this.regform.radio,
                        company:this.regform.company,
                        company_logo:this.regform.imgurl
                    }
                })
                .then(response => {
                    //console.log(response,"mnmn")
                    this.showhid=true
                })
                .catch(err => {
              
                });
    },
    checkphone(mobile){
        if(mobile==''){
        this.$message({
              type: 'warning',
              message: '电话不能为空！'
        }); 
        return;
      }else if(!(/^1[345789]\d{9}$/.test(mobile))){
          this.$message({
              type: 'warning',
              message: '请输入有效联系电话！'
        });  
        return;
      }
    },


  }
}
</script>
<style lang="scss">
.regcont{
   .helptitle{
        color: #347dc7;
        padding: 20px 0 15px 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
   }
   .helpmain{
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
     width: 80%;
     margin-bottom: 50px;

   }
     .r_main{
      width: 80%;
      margin: 0 auto;
    //   margin: 50px 0px;
    .el-form{
        padding: 50px 0px;
    }
      .el-form-item{
          margin: 0px 10% 20px 10%
      }
     .send{
         background-color: #337DC7;
         color: #fff;
         width: 15%;
          border-radius: 0px;
     }
     .el-input__inner{
         border-radius: 0px;
     }
     .submitlist{
        width: 40%;
        background-color: #337DC7;
        color:#fff;
        margin-left: 30%;
     }
   }
   //上传公司标志样式
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 200px;
    height: 178px;
    display: inline-block;
  }
  .succss{
      padding: 100px 0px;
      text-align: center;
      .succfin{
          padding: 40px 0px;
           font-size: 22px;
        font-weight: 500;
      }
      .greyline{
          width: 100%;
          height: 2px;
          background-color: #eee;
          margin-bottom: 50px;
      }
      .backlo{
         color: #337DC7;
         font-size: 15px;
         font-weight: 500
      }
      .el-icon-back{
          padding-right: 6px
      }
  }
   }
</style>